<template>
	<view class="bg">
		<view class="a">
			<view class="a1">
				<view class="a11">{{a.ctitle}}</view>
				<view>{{a.etitle}}</view>
			</view>
			<view><image class="a2" :src="a.img" @tap="go(a.id)"></image></view>
		</view>
		<view class="b">
			<view class="a1">
				<view class="a11">{{b.ctitle}}</view>
				<view>{{b.etitle}}</view>
			</view>
			<view><image class="a2" :src="b.img" @tap="go(b.id)"></image></view>
		</view>
		<view class="c">
			<view class="c1" @tap="go(c.id)">
				<image class="c2" :src="c.img" @tap="go(c.id)"></image>
				<view class="c3">{{c.ctitle}}</view>
				<view class="c4">{{c.etitle}}</view>
			</view>
		</view>
		<view class="c">
			<view class="c1"  @tap="go(d.id)">
				<image class="c2" :src="d.img"></image>
				<view class="c3">{{d.ctitle}}</view>
				<view class="c4">{{d.etitle}}</view>
			</view>
		</view>
		</view>
</template>

<script>
	import {list} from "../../util/kind/kind.js"
	export default {
		data() {
			return {
				a:'',
				b:'',
				c:'',
				d:''
				
			}
		},
		methods:{
			go(val){
				console.log(val)
				uni.navigateTo({
					url:`kindinfo/kindinfo?id=${val}`
				})
			}
		},
		onLoad(val){
			console.log(val)
			list()
			.then(res=>{
				console.log(res)
				var list1=res.data.data
				this.a = list1[0]
				this.b = list1[1]
				this.c = list1[2]
				this.d = list1[3]
			})
		}
	}
</script>

<style lang="scss" scoped>
	.bg{
		background-color: #F1ECE7;
	}
	.a{
		display: flex;
	    justify-content: space-around;	
	    width: 670rpx;
		height:151px ;
		background-color: #D5D5D5;
		border-radius: 15px;
		margin:40rpx auto;
		.a11{
			height: 151rpx;
			line-height: 250rpx;
			font-size: 20px;
		}
		.a2{
				 width: 416rpx;
				 height: 252rpx;
		   }
	   }
	 .b{
	 		display: flex;
	 	    justify-content: space-around;	
	 	    width: 670rpx;
	 		height:151px ;
	 		border-radius: 15px;
			margin: 40rpx auto;
			background-color: white;
		.a11{
			height: 151rpx;
			line-height: 250rpx;
			font-size: 20px;
		}
		.a2{
				 width: 416rpx;
				 height: 252rpx;
	       }
	 	}
    .c{
		position: relative;
		width: 312rpx;
		height: 442rpx;
		float: left;
		margin-left: 40rpx;
	  }
	.c2{
		width: 312rpx;
		height: 442rpx;
	}
	.c3{
		position: absolute;
		top: 100rpx;
		left: 50rpx;
		width: 100%;
		height: 100%;
		font-size: 20px;
	}
	.c4{
		position: absolute;
		top: 150rpx;
		left: 50rpx;
		font-size: 14px;
		text-align: center;
	}
</style>
